<template>
    <div class="interact_box" style="display: flex;" ref="scrollContainer" v-show="show_interact">
       <div class="expand_nav" >
         <Icon   
            @click="block_func_nav=!block_func_nav"       
            style="position: absolute;right: 25px;font-size: 20px;line-height: 35px;"
            :type="block_func_nav ? 'ios-arrow-up' : 'ios-arrow-down'"       
             />

           <div v-for="(item,index) in func_nav" :key="index">
               <span> <Icon :type="item.icon" id="func-ico"/></span> {{item.name}}
           </div>  
       </div>
       
       <div ref="input_text"  v-show="!block_func_nav"  @input="change_inputtext"  id="input_text" contenteditable  @keydown="handleTab">
      
    </div>
    </div>
</template>

<script setup>
import { success } from '@/static/js/alert';
import { ref, onMounted, inject, watch } from 'vue';
let show_interact=defineModel('show_interact')
let block_func_nav = ref(true)
let scrollContainer = ref(null)
let input_text=ref(null)
let user_input_text= defineModel('user_input_text','')
const func_nav = [
    // {
    //     name: '表情',
    //     icon: 'ios-happy-outline',
    //     func: () => {
    //         console.log('表情')
    //     }
    // },
    // {
    //     name: '图片',
    //     icon: 'ios-image-outline',
    //     func: () => {
    //         console.log('图片')
    //     }
    // },
    // {
    //     name: '文件',
    //     icon: 'ios-document-outline',
    //     func: () => {
    //         console.log('文件')
    //     }
    // },
    // {
    //     name: '语音',
    //     icon: 'ios-mic-outline',
    //     func: () => {
    //         console.log('语音')
    //     }
    // },
]
const change_inputtext = (event) => {
    user_input_text.value= event.target.innerText
}


watch(()=>block_func_nav.value,(newVal,oldVal)=>{
    if (newVal) { 
        scrollToBottom()
    }
})
const Emits=defineEmits(['send_message'])
const handleTab = (event) => {
  if (event.key === "Tab") {
    event.preventDefault();
    document.execCommand("insertText", false, "    ");
  } else if (event.key === "Enter" && !event.ctrlKey) {
    event.preventDefault(); 
    if (user_input_text.value.trim() !== '') {
      console.log("发送处理逻辑执行");
    // 双向绑定有问题先取消
      Emits('send_message', user_input_text.value)
      user_input_text.value = ''
      input_text.value.innerText = ''
    } else {
      success("不能发送空消息");
    }
  } else if (event.ctrlKey && event.key === "Enter") {
    event.preventDefault(); 
    document.execCommand("insertText", false, "\n");
  }
};


const scrollToBottom=() =>{
            // 使用scrollTo实现平滑滚动
            scrollContainer.value.scrollTo({
                top: scrollContainer.value.scrollHeight,
                behavior: 'smooth'
            });
}

onMounted(() => { 
    // window.addEventListener('', scrollToBottom)
})


</script>

<style scoped>
.interact_box{
    height: auto;
    width: calc(100%);
    background:transparent;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    outline: none;
    border: none;
}
.expand_nav{
    position: relative;
    border-radius: 5px 5px 0 0;
    width: 100%;
    height: 35px;
    background-color: aquamarine;
    opacity: 0.8;
    display: flex;
    gap:30px;
    align-items: center;
    justify-content: center;
    user-select: none;
}
#func-ico{
  font-size: 16px;
  color: #515a6e;
}
#input_text{
    width: 100%;
    min-height: 150px;
    max-height: 200px;
    border: none;
    outline: none;
    background-color: #fff;
    padding: 8px 5px 10px 10px;
    overflow: scroll;
    text-align: left;
    font-size: 16px;
}
#input_text::-webkit-scrollbar{
    display: none;
}
</style>